<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>管理页</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<link type="text/css" th:href="@{/html/css/treeview.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/treeview.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/vue.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/axios.min.js}"></script>
	<script type="text/javascript">
    	$(function(){
    		var url = "/mymall/menu";
    		$.ajax({
        		async:false,
        		type:"get",
        		data:{},
        		dataType:"json",
        		url:url,
        		success:function(res){
        			$("#tree").treeview({
            			data:res
            		});
        		},
        		error:function(){
        			alert('网络延时 请重试');
        		}
        	});
			
    		$(".nav-tabs a").click(function(){
        		var href = $(this).attr("href");
                $('.nav-tabs a[href="'+href+'"]').tab('show');
            });
    		
       		$("#tree").on("nodeSelected",function(event,e){
       			var murl = e.route;
    			var mtip = e.tip;
    			var mname = e.text;
    			
       			if(mtip.length==0 || $("#"+mtip).length==1){
					return;
				}

				$(".nav-tabs li").removeClass("active");
				var li = $('<li class="active"></li>');
				var a = $('<a></a>');
				var span1 = $('<span style="cursor:pointer" href="#'+mtip+'">'+mname+'</span>');
				var span2 = $('<span style="cursor:pointer"> &times;</span>');
				a.append(span1);
				a.append(span2);
				li.append(a);
				li.appendTo($(".nav-tabs"));
				
				/*
				<div id="index" class="tab-pane fade in active">
                	<iframe src="${root}/user?op=index" frameborder="0" style="width: 100%; height: 500px;"></iframe>
                </div>
				*/
				$(".tab-content div").removeClass("in").removeClass("active");
				var div = $('<div id="'+mtip+'" class="tab-pane fade in active"></div>');
				var iframe = $('<iframe src="/mymall'+murl+'" frameborder="0" style="width: 100%; height: 500px;"></iframe>')
				div.append(iframe);
				div.appendTo($(".tab-content"));
				
				span1.click(function(){ 
	        		var href = $(this).attr("href");
	                $('.nav-tabs span[href="'+href+'"]').tab('show');
	            });
				
				span2.click(function(){
					$("#"+mtip).remove();
					$(this).parents("li").remove();
					
					$(".nav-tabs li").removeClass("active");
					$('.nav-tabs li:first').addClass("active");
					$(".tab-content div").removeClass("in").removeClass("active");
					$("#welcome").addClass("in").addClass("active");
				});
       		});
    	});
    </script>
</head>
<body>
	<div id="app" class="container-fluid" style="margin-top: 10px;">
		<div class="col-md-2">
            <img th:if="${session.user.role=='ROLE_SHOP'}" class="img-circle img-thumbnail" style="width: 100px; height:100px; margin-left: 40px;"
				th:src="@{/logo/{username}(username=${session.user.username})}" />
			<img th:unless="${session.user.role=='ROLE_SHOP'}" class="img-circle img-thumbnail" style="width: 100px; height:100px; margin-left: 40px;"
				th:src="@{/photo/{username}(username=${session.user.username})}" />
            <ul class="list-unstyled" style="margin-left: 45px; margin-top: 10px;">
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" >
    					<span th:text="${session.user.username}"></span>
    					<span th:text="${session.user.roleVO.rnamezh}"></span>
						<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a id="cgpwd" href="javascript:void(0);">更改密码</a></li>
                        <li><a id="cgpic" href="javascript:void(0);">更改头像</a></li>
                        <li class="divider"></li>
                        <li><a th:href="@{/logout}">安全退出</a></li>
                    </ul>
                </li>
            </ul>
            <div id="tree" class="treeview" style="margin-left: 10px;"></div>
        </div>
        <div class="col-md-10">
            <ul class="nav nav-tabs" style="margin-top:10px;">
                <li class="active"><a href="#welcome">欢迎</a></li>
            </ul>
            <div class="tab-content">
                <div id="welcome" class="tab-pane fade in active">
                	<iframe th:src="@{/html/images/mall.jpg}" frameborder="0" style="width: 100%; height: 600px;"></iframe>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },
            mounted:function(){
            	
            }
        })
    </script>
</body>
</html>